<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤管理 - 教务管理系统</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; color: #333; background: #f8f9fa; }
        header { background-color: #007BFF; color: white; padding: 0 40px; height: 60px; display: flex; align-items: center; }
        .logo { font-size: 1.3em; font-weight: bold; margin-right: 40px; }
        nav { display: flex; align-items: center; width: 100%; }
        .nav-left { flex: 1; display: flex; align-items: center; }
        .nav-center { flex: 2; display: flex; justify-content: center; }
        .nav-center a { color: white; text-decoration: none; margin: 0 18px; font-size: 1.1em; transition: text-decoration 0.2s; }
        .nav-center a.active, .nav-center a:hover { text-decoration: underline; }
        .nav-right { flex: 1; text-align: right; font-size: 1em; }
        main { padding: 40px 20px 20px 20px; }
        .title { font-size: 2em; color: #007BFF; margin-bottom: 18px; }
        .desc { margin-bottom: 24px; color: #555; }
        .actions { margin-bottom: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
        .modal-bg {
            display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.2); z-index: 1000;
        }
        .modal {
            background: #fff; border-radius: 8px; box-shadow: 0 2px 12px #e0e0e0; width: 350px; max-width: 90vw; padding: 28px 24px 18px 24px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
        }
        .modal-title { font-size: 1.2em; color: #007BFF; margin-bottom: 18px; text-align: center; }
        .modal label { display: block; margin-bottom: 6px; color: #555; }
        .modal input, .modal select { width: 100%; padding: 7px 10px; margin-bottom: 14px; border: 1px solid #ccc; border-radius: 4px; }
        .modal-btns { text-align: right; }
        .modal-btns button { margin-left: 10px; padding: 7px 18px; border-radius: 4px; border: none; cursor: pointer; }
        .modal-btns .ok { background: var(--success-color); color: #fff; }
        .modal-btns .ok:hover { background: var(--success-dark); }
        .modal-btns .cancel { background: var(--danger-color); color: #fff; }
        .modal-btns .cancel:hover { background: var(--danger-dark); }

        /* 考勤状态下拉框样式 */
        .status-select {
            width: 100%;
            max-width: 120px;
            font-weight: 500;
            text-align: center;
        }

        /* 状态颜色 */
        .status-select[data-status="出勤"] {
            border-color: var(--success-color);
            color: var(--success-color);
        }

        .status-select[data-status="缺勤"] {
            border-color: var(--danger-color);
            color: var(--danger-color);
        }

        .status-select[data-status="迟到"] {
            border-color: var(--warning-color);
            color: var(--warning-color);
        }

        .status-select[data-status="请假"] {
            border-color: var(--info-color);
            color: var(--info-color);
        }

        @media (max-width: 900px) {
            main { padding: 20px 5px; }
            .title { font-size: 1.3em; }
        }
    </style>
</head>
<body>
    <header>
        <nav style="width:100%;display:flex;align-items:center;">
            <div class="nav-left"><span class="logo">教务管理系统</span></div>
            <div class="nav-center" id="navLinks">
                <a href="index.html">首页</a>
                <a href="student.html" class="admin-teacher-link">学生管理</a>
                <a href="attendance.html" class="active admin-teacher-link">考勤管理</a>
                <a href="user.html" class="admin-only-link">用户管理</a>
            </div>
            <div class="nav-right">
                <span id="userName" style="cursor:pointer;position:relative;">admin
                    <span id="logoutMenu" style="display:none;position:absolute;right:0;top:28px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #e0e0e0;padding:0 0;z-index:10;min-width:120px;">
                        <a href="userinfo.html" style="color:#007BFF;text-decoration:none;display:block;padding:8px 18px;text-align:center;" onclick="closeMenu()">个人信息</a>
                        <a href="login.html" style="color:#007BFF;text-decoration:none;display:block;padding:8px 18px;text-align:center;border-top:1px solid #eee;" onclick="logout()">退出登录</a>
                    </span>
                </span>
            </div>
        </nav>
    </header>
    <main>
        <div class="title">考勤信息管理</div>
        <div class="desc">可对学生的出勤、缺勤、请假等考勤记录进行登记、查询和统计。</div>
        <div class="actions">
            <button class="btn btn-warning" onclick="exportAttendance()">导出记录</button>
            <div style="margin-left: auto; display: flex; align-items: center; gap: 10px;">
                <select id="classSelect" onchange="fetchStudentList()">
                    <option value="">全部班级</option>
                </select>
                <input id="dateInput" type="date" style="padding:8px 12px; border-radius:4px; border:1px solid #ccc;" onchange="fetchStudentList()" />
                <button class="btn btn-success" onclick="batchAttendance()">批量签到出勤</button>
            </div>
        </div>
        <div id="loadingIndicator" style="text-align:center; padding:20px; display:block;">
            <p>正在加载数据，请稍候...</p>
        </div>
        <table id="attendanceTable" style="display:none;">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 学生列表将通过JavaScript动态生成 -->
            </tbody>
        </table>

    </main>
    <script>
        // 检查用户是否已登录
        function checkLogin() {
            var user = localStorage.getItem('loginUser');
            if (!user) {
                // 未登录，重定向到登录页面
                window.location.href = 'login.html';
                return false;
            }
            return user;
        }

        // 根据用户角色控制页面显示
        function setupUIByRole() {
            var role = localStorage.getItem('userRole') || '';
            var userName = localStorage.getItem('userName') || localStorage.getItem('loginUser');

            // 设置用户名显示
            document.getElementById('userName').firstChild.textContent = userName;

            // 控制导航栏显示
            var adminTeacherLinks = document.querySelectorAll('.admin-teacher-link');
            var adminOnlyLinks = document.querySelectorAll('.admin-only-link');

            if (role === 'admin') {
                // 管理员可以看到所有链接
                adminTeacherLinks.forEach(link => link.style.display = 'inline');
                adminOnlyLinks.forEach(link => link.style.display = 'inline');
            } else if (role === 'teacher') {
                // 老师可以看到学生管理和考勤管理
                adminTeacherLinks.forEach(link => link.style.display = 'inline');
                adminOnlyLinks.forEach(link => link.style.display = 'none');
            } else if (role === 'student') {
                // 学生不能访问考勤管理页面
                window.location.href = 'index.html';
                return;
            }
        }

        // 页面加载时获取班级列表和学生列表
        document.addEventListener('DOMContentLoaded', function() {
            // 验证登录状态
            var user = checkLogin();
            if (!user) return; // 如果未登录，已重定向到登录页面

            // 根据用户角色设置UI
            setupUIByRole();

            // 设置日期默认为今天
            var today = new Date().toISOString().split('T')[0];
            document.getElementById('dateInput').value = today;

            console.log("页面初始化，设置日期为:", today);

            // 先获取班级列表，然后再获取学生列表
            fetchClassList()
                .then(() => {
                    console.log("班级列表加载完成，开始获取学生列表");
                    // 班级列表加载完成后再获取学生列表
                    fetchStudentList();
                })
                .catch(error => {
                    console.error('初始化数据失败:', error);
                });
        });

        // 获取班级列表
        function fetchClassList() {
            return new Promise((resolve, reject) => {
                console.log("开始获取班级列表");
                fetch('/api/class/list')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('获取班级列表请求失败，状态码: ' + response.status);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log("获取到的班级列表:", data);
                        // 清空班级下拉框
                        var classSelect = document.getElementById('classSelect');

                        // 保留"全部班级"选项
                        classSelect.innerHTML = '<option value="">全部班级</option>';

                        // 添加班级选项
                        if (Array.isArray(data)) {
                            data.forEach(cls => {
                                var option = document.createElement('option');
                                option.value = cls.id;
                                option.text = cls.name;
                                classSelect.appendChild(option);
                            });
                            resolve(data); // 成功时解析
                        } else {
                            console.error('班级列表数据格式不正确:', data);
                            reject(new Error('班级列表数据格式不正确'));
                        }
                    })
                    .catch(error => {
                        console.error('获取班级列表失败:', error);
                        reject(error); // 失败时拒绝
                    });
            });
        }

        // 获取学生列表并显示考勤状态
        function fetchStudentList() {
            // 显示加载指示器，隐藏表格
            document.getElementById('loadingIndicator').style.display = 'block';
            document.getElementById('attendanceTable').style.display = 'none';

            var classId = document.getElementById('classSelect').value;
            var date = document.getElementById('dateInput').value;

            console.log("开始获取学生列表，班级ID:", classId, "日期:", date);

            if (!date) {
                alert('请选择日期');
                document.getElementById('loadingIndicator').style.display = 'none';
                return;
            }

            // 学生查询URL
            var studentUrl = '/api/student/list';
            if (classId) {
                studentUrl += '?classId=' + classId;
            }

            // 获取学生列表
            console.log("获取学生列表URL:", studentUrl);
            fetch(studentUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取学生列表请求失败，状态码: ' + response.status);
                    }
                    return response.json();
                })
                .then(students => {
                    console.log("获取到的学生列表:", students);
                    var tbody = document.querySelector('#attendanceTable tbody');
                    tbody.innerHTML = '';

                    if (!Array.isArray(students)) {
                        console.error('学生列表数据格式不正确:', students);
                        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">学生数据格式不正确</td></tr>';

                        // 隐藏加载指示器，显示表格
                        document.getElementById('loadingIndicator').style.display = 'none';
                        document.getElementById('attendanceTable').style.display = 'table';
                        return;
                    }

                    if (students.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">暂无学生数据</td></tr>';

                        // 隐藏加载指示器，显示表格
                        document.getElementById('loadingIndicator').style.display = 'none';
                        document.getElementById('attendanceTable').style.display = 'table';
                        return;
                    }

                    // 获取考勤数据
                    var attendanceUrl = '/api/attendance/list?date=' + date;
                    if (classId) {
                        attendanceUrl += '&classId=' + classId;
                    }

                    console.log("获取考勤数据URL:", attendanceUrl);
                    fetch(attendanceUrl)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('获取考勤数据请求失败，状态码: ' + response.status);
                            }
                            return response.json();
                        })
                        .then(attendances => {
                            console.log("获取到的考勤数据:", attendances);

                            if (!Array.isArray(attendances)) {
                                console.error('考勤数据格式不正确:', attendances);
                                throw new Error('考勤数据格式不正确');
                            }

                            // 创建考勤状态映射
                            var attendanceMap = {};
                            attendances.forEach(att => {
                                if (att && att.studentId) {
                                    attendanceMap[att.studentId] = {
                                        id: att.id,
                                        status: att.status
                                    };
                                }
                            });

                            // 渲染学生列表和考勤状态
                            students.forEach(student => {
                                if (!student || !student.studentId) {
                                    console.warn('跳过无效的学生数据:', student);
                                    return;
                                }

                                var tr = document.createElement('tr');
                                var attendance = attendanceMap[student.studentId] || { status: '未登记' };

                                tr.innerHTML = `
                                    <td>${student.studentId}</td>
                                    <td>${student.name || '未知'}</td>
                                    <td>${student.className || ''}</td>
                                    <td>
                                        <select class="status-select" data-status="${attendance.status}" data-student-id="${student.studentId}" data-class-id="${student.classId || ''}" data-attendance-id="${attendance.id || ''}" onchange="updateStatus(this)">
                                            <option value="出勤" ${attendance.status === '出勤' ? 'selected' : ''}>出勤</option>
                                            <option value="缺勤" ${attendance.status === '缺勤' ? 'selected' : ''}>缺勤</option>
                                            <option value="迟到" ${attendance.status === '迟到' ? 'selected' : ''}>迟到</option>
                                            <option value="请假" ${attendance.status === '请假' ? 'selected' : ''}>请假</option>
                                            <option value="未登记" ${attendance.status === '未登记' ? 'selected' : ''} disabled>未登记</option>
                                        </select>
                                    </td>
                                    <td>
                                        <button class="btn btn-danger" onclick="deleteAttendance('${attendance.id || ''}', '${student.studentId}')">删除</button>
                                    </td>
                                `;
                                tbody.appendChild(tr);
                            });

                            // 隐藏加载指示器，显示表格
                            document.getElementById('loadingIndicator').style.display = 'none';
                            document.getElementById('attendanceTable').style.display = 'table';
                        })
                        .catch(error => {
                            console.error('获取考勤数据失败:', error);

                            // 即使获取考勤数据失败，也显示学生列表
                            students.forEach(student => {
                                if (!student || !student.studentId) return;

                                var tr = document.createElement('tr');
                                tr.innerHTML = `
                                    <td>${student.studentId}</td>
                                    <td>${student.name || '未知'}</td>
                                    <td>${student.className || ''}</td>
                                    <td>
                                        <select class="status-select" data-status="未登记" data-student-id="${student.studentId}" data-class-id="${student.classId || ''}" onchange="updateStatus(this)">
                                            <option value="出勤">出勤</option>
                                            <option value="缺勤">缺勤</option>
                                            <option value="迟到">迟到</option>
                                            <option value="请假">请假</option>
                                            <option value="未登记" selected disabled>未登记</option>
                                        </select>
                                    </td>
                                    <td>
                                        <button class="btn btn-danger" onclick="deleteAttendance('', '${student.studentId}')">删除</button>
                                    </td>
                                `;
                                tbody.appendChild(tr);
                            });

                            // 隐藏加载指示器，显示表格
                            document.getElementById('loadingIndicator').style.display = 'none';
                            document.getElementById('attendanceTable').style.display = 'table';
                        });
                })
                .catch(error => {
                    console.error('获取学生列表失败:', error);
                    var tbody = document.querySelector('#attendanceTable tbody');
                    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">获取学生数据失败: ' + error.message + '</td></tr>';

                    // 隐藏加载指示器，显示表格（即使有错误）
                    document.getElementById('loadingIndicator').style.display = 'none';
                    document.getElementById('attendanceTable').style.display = 'table';
                });
        }

        // 更新学生考勤状态
        function updateStatus(selectElement) {
            var studentId = selectElement.getAttribute('data-student-id');
            var classId = selectElement.getAttribute('data-class-id');
            var attendanceId = selectElement.getAttribute('data-attendance-id');
            var status = selectElement.value;
            var date = document.getElementById('dateInput').value;

            console.log("更新考勤状态:", {
                studentId: studentId,
                classId: classId,
                attendanceId: attendanceId,
                status: status,
                date: date
            });

            if (!studentId) {
                console.error("缺少学生ID");
                alert('无法更新考勤状态：缺少学生ID');
                return;
            }

            if (!date) {
                alert('请选择日期');
                return;
            }

            // 更新下拉框的data-status属性，用于样式显示
            selectElement.setAttribute('data-status', status);

            var attendance = {
                date: date,
                studentId: studentId,
                classId: classId && classId !== '' ? parseInt(classId) : null,
                status: status,
                remark: ''
            };

            // 如果已有考勤记录，则更新
            if (attendanceId && attendanceId !== '') {
                attendance.id = parseInt(attendanceId);
                console.log("更新考勤记录:", attendance);

                fetch('/api/attendance/edit', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(attendance)
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('更新考勤状态请求失败，状态码: ' + response.status);
                    }
                    return response.json();
                })
                .then(result => {
                    console.log("更新考勤结果:", result);
                    if (!result.success) {
                        alert(result.message || '更新考勤状态失败');
                        fetchStudentList(); // 刷新列表
                    }
                })
                .catch(error => {
                    console.error('更新考勤状态失败:', error);
                    alert('更新考勤状态失败，请稍后重试');
                    fetchStudentList(); // 刷新列表
                });
            }
            // 否则创建新的考勤记录
            else {
                console.log("创建新考勤记录:", attendance);
                fetch('/api/attendance/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(attendance)
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('创建考勤记录请求失败，状态码: ' + response.status);
                    }
                    return response.json();
                })
                .then(result => {
                    console.log("创建考勤结果:", result);
                    if (result.success) {
                        // 更新data-attendance-id属性
                        if (result.data && result.data.id) {
                            selectElement.setAttribute('data-attendance-id', result.data.id);
                            console.log("考勤ID已更新:", result.data.id);
                        } else {
                            console.warn("考勤创建成功但未返回ID");
                        }
                    } else {
                        alert(result.message || '创建考勤记录失败');
                        fetchStudentList(); // 刷新列表
                    }
                })
                .catch(error => {
                    console.error('创建考勤记录失败:', error);
                    alert('创建考勤记录失败，请稍后重试');
                    fetchStudentList(); // 刷新列表
                });
            }
        }

        // 删除考勤记录
        function deleteAttendance(attendanceId, studentId) {
            console.log("删除考勤记录:", { attendanceId, studentId });

            if (!attendanceId || attendanceId === '') {
                alert('该学生尚未登记考勤');
                return;
            }

            if (!confirm('确定要删除该考勤记录吗？')) {
                return;
            }

            fetch('/api/attendance/delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id: parseInt(attendanceId) })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('删除考勤记录请求失败，状态码: ' + response.status);
                }
                return response.json();
            })
            .then(result => {
                console.log("删除考勤结果:", result);
                if (result.success) {
                    alert('删除考勤记录成功');
                    fetchStudentList(); // 刷新列表
                } else {
                    alert(result.message || '删除考勤记录失败');
                }
            })
            .catch(error => {
                console.error('删除考勤记录失败:', error);
                alert('删除考勤记录失败，请稍后重试: ' + error.message);
            });
        }

        // 批量签到
        function batchAttendance() {
            var classId = document.getElementById('classSelect').value;
            var date = document.getElementById('dateInput').value;

            console.log("批量签到:", { classId, date });

            if (!classId) {
                alert('请选择班级');
                return;
            }
            if (!date) {
                alert('请选择日期');
                return;
            }

            // 确认是否覆盖已有考勤记录
            if (!confirm('批量签到将覆盖该班级所有学生当天的考勤记录，确定继续吗？')) {
                return;
            }

            // 获取该班级的所有学生
            fetch('/api/student/list?classId=' + classId)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取学生列表请求失败，状态码: ' + response.status);
                    }
                    return response.json();
                })
                .then(students => {
                    console.log("批量签到 - 获取到的学生列表:", students);

                    if (!Array.isArray(students)) {
                        throw new Error('学生列表数据格式不正确');
                    }

                    if (students.length === 0) {
                        alert('该班级暂无学生');
                        return;
                    }

                    // 先获取当天该班级的考勤记录
                    fetch('/api/attendance/list?date=' + date + '&classId=' + classId)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('获取考勤记录请求失败，状态码: ' + response.status);
                            }
                            return response.json();
                        })
                        .then(existingAttendances => {
                            console.log("批量签到 - 获取到的现有考勤记录:", existingAttendances);

                            if (!Array.isArray(existingAttendances)) {
                                throw new Error('考勤记录数据格式不正确');
                            }

                            // 创建学生ID到考勤ID的映射
                            var attendanceMap = {};
                            existingAttendances.forEach(att => {
                                if (att && att.studentId) {
                                    attendanceMap[att.studentId] = att.id;
                                }
                            });

                            // 为每个学生创建或更新考勤记录
                            var attendances = students.map(student => {
                                if (!student || !student.studentId) {
                                    console.warn('跳过无效的学生数据:', student);
                                    return null;
                                }

                                var attendance = {
                                    date: date,
                                    studentId: student.studentId,
                                    classId: parseInt(classId),
                                    status: '出勤',
                                    remark: '批量签到'
                                };

                                // 如果已存在考勤记录，添加ID以更新而非新增
                                if (attendanceMap[student.studentId]) {
                                    attendance.id = attendanceMap[student.studentId];
                                }

                                return attendance;
                            }).filter(att => att !== null); // 过滤掉无效的记录

                            console.log("批量签到 - 准备提交的考勤记录:", attendances);

                            if (attendances.length === 0) {
                                alert('没有有效的学生数据可以签到');
                                return;
                            }

                            // 批量更新考勤记录
                            fetch('/api/attendance/batch', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify(attendances)
                            })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('批量签到请求失败，状态码: ' + response.status);
                                }
                                return response.json();
                            })
                            .then(result => {
                                console.log("批量签到结果:", result);
                                if (result.success) {
                                    alert('批量签到成功');
                                    fetchStudentList(); // 刷新列表
                                } else {
                                    alert(result.message || '批量签到失败');
                                }
                            })
                            .catch(error => {
                                console.error('批量签到失败:', error);
                                alert('批量签到失败，请稍后重试: ' + error.message);
                            });
                        })
                        .catch(error => {
                            console.error('获取考勤记录失败:', error);
                            alert('获取考勤记录失败，请稍后重试: ' + error.message);
                        });
                })
                .catch(error => {
                    console.error('获取学生列表失败:', error);
                    alert('获取学生列表失败，请稍后重试: ' + error.message);
                });
        }

        // 通用函数
        document.getElementById('userName').onclick = function(e) {
            var menu = document.getElementById('logoutMenu');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
            e.stopPropagation();
        };

        document.body.onclick = function() {
            var menu = document.getElementById('logoutMenu');
            if(menu) menu.style.display = 'none';
        };

        function logout() {
            localStorage.removeItem('loginUser');
            window.location.href = 'login.html'; // 退出后重定向到登录页面
        }

        function closeMenu() {
            setTimeout(function(){
                var menu = document.getElementById('logoutMenu');
                if(menu) menu.style.display = 'none';
            }, 100);
        }

        // 导出考勤记录
        function exportAttendance() {
            var classId = document.getElementById('classSelect').value;
            var date = document.getElementById('dateInput').value;

            if (!date) {
                alert('请选择日期');
                return;
            }

            var className = classId ? document.getElementById('classSelect').options[document.getElementById('classSelect').selectedIndex].text : '全部班级';

            // 构建URL，与获取考勤数据相同的参数
            var attendanceUrl = '/api/attendance/list?date=' + date;
            if (classId) {
                attendanceUrl += '&classId=' + classId;
            }

            // 获取考勤数据
            fetch(attendanceUrl)
                .then(response => response.json())
                .then(attendances => {
                    if (attendances.length === 0) {
                        alert('暂无考勤数据可导出');
                        return;
                    }

                    // 添加UTF-8 BOM标记，解决中文乱码问题
                    var BOM = new Uint8Array([0xEF, 0xBB, 0xBF]);

                    // 创建CSV内容
                    var csvContent = "学号,姓名,班级,考勤状态,日期\n";

                    // 按学号排序
                    attendances.sort((a, b) => a.studentId.localeCompare(b.studentId));

                    attendances.forEach(att => {
                        // 处理可能包含逗号的字段，用双引号包裹
                        var name = att.studentName ? `"${att.studentName.replace(/"/g, '""')}"` : '';
                        var className = att.className ? `"${att.className.replace(/"/g, '""')}"` : '';
                        var status = att.status ? `"${att.status.replace(/"/g, '""')}"` : '"未登记"';

                        csvContent += `${att.studentId},${name},${className},${status},${att.date}\n`;
                    });

                    // 创建Blob对象，添加BOM标记
                    var blob = new Blob([BOM, csvContent], { type: 'text/csv;charset=utf-8;' });

                    // 创建下载链接
                    var link = document.createElement("a");
                    var url = URL.createObjectURL(blob);
                    link.setAttribute("href", url);
                    link.setAttribute("download", `考勤记录_${className}_${date}.csv`);
                    link.style.visibility = 'hidden';

                    // 添加到文档并触发点击
                    document.body.appendChild(link);
                    link.click();

                    // 清理
                    document.body.removeChild(link);
                })
                .catch(error => {
                    console.error('导出考勤记录失败:', error);
                    alert('导出考勤记录失败，请稍后重试');
                });
        }
    </script>
</body>
</html>
